<script setup>
import { onMounted, ref } from 'vue'
import { getComplaintInfo, getQuestionList } from '@/api/index'
import { useUserStore } from '@/stores/user'

// 跳转单元格
const navigateList = [
  { title: '意见反馈', icon: '../../../static/image/index/complaint/icon-2.jpg', route: '/pages/index/view/complaint-feedback' },
  { title: '游客投诉', icon: '../../../static/image/index/complaint/icon-1.jpg', route: '/pages/index/view/complaint-complain' },
]
function goNavigate(url) {
  const { token } = useUserStore()
  if (!token)
    uni.switchTab({ url: '/pages/me/index' })
  else
    uni.navigateTo({ url })
}

// 投诉电话和工作时间
const phoneAndTimeList = ref([
  { title: '投诉电话：', value: '', icon: '../../../static/image/index/complaint/icon-3.jpg', callback: (item) => { uni.makePhoneCall({ phoneNumber: item.value }) } },
  { title: '工作时间：', value: '', icon: '../../../static/image/index/complaint/icon-4.jpg' },
])
// 获取投诉电话和工作时间
async function onGetComplaintInfo() {
  try {
    const { result: { phone, worktime } } = await getComplaintInfo()
    phoneAndTimeList.value[0].value = phone
    phoneAndTimeList.value[1].value = worktime
  }
  catch (e) {
    await uni.showToast({ icon: 'none', title: '获取投诉电话和工作时间失败' })
  }
}

// 常见问题列表
const questionList = ref([])
// 当前展开的问题
const activeQuestion = ref([])
// 展开常见问题
function onQuestionChange(val) {
  activeQuestion.value = val
}
// 获取常见问题列表
async function onGetQuestionList() {
  try {
    const { result } = await getQuestionList()
    questionList.value = result.map(item => ({ title: item.title, content: item.remark, id: item.id }))
  }
  catch (e) {
    await uni.showToast({ icon: 'none', title: '获取常见问题列表失败' })
  }
}

onMounted(() => {
  onGetComplaintInfo()
  onGetQuestionList()
})
</script>

<template>
  <view class="bg-[#F5F5F5] pb-safe min-h-safe">
    <nut-navbar title="意见反馈" custom-color="#000" left-show placeholder fixed />
    <view class="mt-2">
      <!-- 跳转单元格 -->
      <view class="mb-1.5">
        <nut-config-provider :theme-vars="{ cellColor: '#000' }">
          <nut-cell-group>
            <nut-cell
              v-for="item in navigateList"
              :key="item.name"
              :title="item.title"
              is-link
              @click="goNavigate(item.route)"
            >
              <template #icon>
                <view class="mr-2.5 center">
                  <image class="h-36 w-36" :src="item.icon" />
                </view>
              </template>
            </nut-cell>
          </nut-cell-group>
        </nut-config-provider>
      </view>
      <!-- 投诉电话和工作时间 -->
      <view class="mb-1.5">
        <nut-config-provider :theme-vars="{ cellColor: '#000' }">
          <nut-cell-group>
            <nut-cell
              v-for="item in phoneAndTimeList"
              :key="item.title"
              :title="`${item.title}${item.value}`"
              @click="item.callback ? item.callback(item) : null"
            >
              <template #icon>
                <view class="mr-2.5 center">
                  <image class="h-36 w-36" :src="item.icon" />
                </view>
              </template>
            </nut-cell>
          </nut-cell-group>
        </nut-config-provider>
      </view>
      <!-- 常见问题 -->
      <view>
        <nut-config-provider :theme-vars="{ cellColor: '#000', collapseItemColor: '#000' }">
          <nut-cell-group>
            <nut-cell title="常见问题">
              <template #icon>
                <view class="mr-2.5 center">
                  <image class="h-36 w-36" src="../../../static/image/index/complaint/icon-5.jpg" />
                </view>
              </template>
            </nut-cell>
            <nut-collapse v-model="activeQuestion" @change="onQuestionChange">
              <nut-collapse-item v-for="item in questionList" :key="item.id" :title="item.title" :name="item.id">
                {{ item.content }}
              </nut-collapse-item>
            </nut-collapse>
          </nut-cell-group>
        </nut-config-provider>
      </view>
    </view>
  </view>
</template>
